/* eslint-disable jsx-a11y/alt-text */
import React from 'react';
import Navbar from '../component/Navbar';
import './style/heavyOrder.css';
import { Toast } from 'antd-mobile';
const tabList = ["提交时间", "类型", "倍数", '本金', '配资金额']
const czje = [
    { title: '100元', key: 0 },
    { title: '2000元', key: 1 },
    { title: '5000元', key: 2 },
    { title: '10000元', key: 3 },
    { title: '20000元', key: 4 },
    { title: '40000元', key: 5 },
]
class heavyOrder extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tabIndex: 0,
            listIndex: -1,
            textTilte: "",
            czjeSelect: 0,
            newAlert: false,
            type: true,
            list: ["期货怎么交易？", "怎么提现？", "配资是什么？", '怎么提现？', "配资是什么？"]
        }
    }
    goBack = () => {
        this.props.history.goBack();
    }
    //tab切换
    jumpTab(index) {
        console.log(index)
        this.setState({
            tabIndex: index,
        })
    }
    //点击list展开
    jumpListItem(index) {
        const { listIndex } = this.state
        if (listIndex === index) index = -1
        this.setState({
            listIndex: index,
            newAlert: false
        })
    }
    addShow(index) {
        console.log(index)
        switch (index) {
            case 0:
                this.setState({
                    textTilte: '追加本金',
                    newAlert: true
                })
                break
            case 1:
                this.setState({
                    textTilte: '增加配资',
                    newAlert: true

                })
                break

            case 2:
                this.setState({
                    textTilte: '减少配资',
                    newAlert: true

                })
                break

            case 3:
                this.setState({
                    textTilte: '盈利提取',
                    newAlert: true
                })
                break
            case 4:
                this.setState({
                    newAlert: false
                })
                Toast.success("结算成功")
                break
            case 5:
                this.setState({
                    newAlert: false
                })
                this.props.history.push({ pathname: '/login' })
                break
            default:
                this.setState({
                    newAlert: false
                })
                Toast.info(index, 1);
                break
        }

    }
    //提交
    submit() {
        Toast.success('提交成功', 1);
    }
    render() {
        const { list, listIndex, tabIndex, newAlert, textTilte } = this.state
        return (
            <div className='heavyOrder'>
                <Navbar onClick={this.goBack} title='配资订单' ></Navbar>
                <div className='scroll'>
                    <div className="tab">
                        {
                            tabList.map((item, index) => {
                                return <div key={index} className="tabItem">{item}</div>
                            })
                        }
                    </div>
                    <div className='content'>
                        {
                            list.map((item, index) => {
                                return <div className="listItem" key={index} >
                                    <div className="flex align-center" onClick={() => this.jumpListItem(index)}>
                                        <div className="tabItem">2020-1-21 12:23:34</div>
                                        <div className="tabItem">按月</div>
                                        <div className="tabItem">10倍</div>
                                        <div className="tabItem">1000.00</div>
                                        <div className="tabItem flex align-center" style={{ justifyContent: "center" }} >
                                            <span className='money' style={{ color: "#F98743" }}>325783</span>
                                            {
                                                index === listIndex ? <img className="imgIcon" src={require('./img/help/icon2.png')} /> : <img className="imgIcon" src={require('./img/help/icon1.png')} />
                                            }
                                        </div>


                                    </div>
                                    {
                                        index === listIndex ? <div className="answer">
                                            <div className='flex'>
                                                <div className='flex-1'>订单编号：623462327453</div>
                                                <div className='flex-1'>订单类型：按日策略</div>
                                            </div>
                                            <div className='flex'>
                                                <div className='flex-1'>杠杆倍数：10倍</div>
                                                <div className='flex-1'>订单周期：1个月</div>
                                            </div>
                                            <div className='flex'>
                                                <div className='flex-1'>操盘总额：1200090</div>
                                                <div className='flex-1'>杠杆本金：1000000</div>
                                            </div>
                                            <div className='flex'>
                                                <div className='flex-1'>平仓线：1030000</div>
                                                <div className='flex-1'>警戒线：1050000</div>
                                            </div>
                                            <div className='flex'>
                                                <div className='flex-1'>开始交易：2020-02-23</div>
                                                <div className='flex-1'>杠杆利息：1450</div>
                                            </div>
                                            <div className='flex'>
                                                <div className='flex-1'>结束交易：2020-02-23</div>
                                                <div className='flex-1'>交易账号：88888888</div>
                                            </div>
                                            <div className='flex'>
                                                <div className='flex-1'>交易状态：已支付-已签约</div>
                                                <div className='flex-1'>交易密码：12345678</div>
                                            </div>
                                            <div className='tabBtn' style={{ opacity: index === 1 ? "0.35" : "1" }}>
                                                <div className="button" onClick={() => this.addShow(0)}>追加本金</div>
                                                <div className="button" onClick={() => this.addShow(1)}>增加配资</div>
                                                <div className="button" onClick={() => this.addShow(2)}>减少配资</div>
                                            </div>
                                            <div className='tabBtn' style={{ opacity: index === 1 ? "0.35" : "1" }}>
                                                <div className="button" onClick={() => this.addShow(3)}>盈利提取</div>
                                                <div className="button" onClick={() => this.addShow(4)}>结算申请</div>
                                                {
                                                    index === 0 ? <div className="button" onClick={() => this.addShow(5)}>立即登录</div> : <div onClick={() => this.addShow(6)} className="button">立即签约</div>
                                                }
                                            </div>
                                            {
                                                index === listIndex && newAlert ? <div>
                                                    <div className="newFlexDiv">
                                                        <p>{textTilte}</p>
                                                        <input placeholder='输入100倍数的本金'></input>
                                                        <span>元</span>
                                                    </div>
                                                    <div className="newSecond">
                                                        <div className="title">
                                                            <p>您本次{textTilte}为</p>
                                                            <span>（本金*倍数）</span>
                                                        </div>
                                                        <div className='czje'>
                                                            {
                                                                czje && czje.map((v, k) => {
                                                                    return <span style={{
                                                                        color: `${this.state.czjeSelect === v.key ? '#F98743' : '#666666'}`,
                                                                        backgroundColor: `${this.state.czjeSelect === v.key ? 'rgba(249,135,67,0.15)' : 'rgba(243,244,246,1)'}`,
                                                                        border: `${this.state.czjeSelect === v.key ? '1px solid rgba(249,135,67,1)' : 'none'}`,
                                                                    }}
                                                                        onClick={() => {
                                                                            this.setState({
                                                                                czjeSelect: v.key
                                                                            })
                                                                        }}
                                                                        key={v + k}>{v.title}</span>
                                                                })
                                                            }
                                                        </div>
                                                    </div>
                                                    <div className='ruleText'>说明：次日提现可免除手续费</div>
                                                    <div className='btnBg' onClick={() => this.submit()}>确认提交</div>
                                                </div> : null
                                            }

                                        </div> : null
                                    }
                                </div>
                            })
                        }

                    </div>
                </div>
            </div>
        )
    }
}

export default heavyOrder;